<!-- Author:Rain -->

<template>
    <div class="new-guide-common__cont">
        <div class="new-guide-common__title"> 上传头像 6/6 </div>
        <div class="new-guide-common__progress">
            <div class="new-guide-common__progress-inner" style="width: 492px;"></div>
        </div>
        <div class="page-loading" style="display: none;">正在加载中...</div>
        <div class="new-guide-upload-avatar" graystyletype="2">
            <div class="new-guide-upload-avatar__main">
                <div>
                    <label for="uploadImg">
                        <div class="custom-box">
                            <div>
                                <div class="new-guide-upload-avatar__upload-img"><img :src="profile" alt="默认头像"></div>

                                <input id="uploadImg" @change="changeFile($event)" type="file"
                                    accept="image/png,image/gif,image/jpeg" class="upload-input">
                                <button type="button" class="new-guide-upload-avatar__upload-btn">上传头像</button>

                            </div>
                        </div>
                    </label>
                    <div class="cropper-win" style="display: none;">
                        <div class="custom-cropper-box">
                            <div class="vue-cropper">
                                <div class="cropper-box">
                                    <div class="cropper-box-canvas"
                                        style="width: 0px; height: 0px; transform: scale(1, 1) translate3d(0px, 0px, 0px) rotateZ(0deg); display: none;">
                                        <img src="" alt="cropper-img">
                                    </div>
                                </div>
                                <div class="cropper-drag-box cropper-move"></div>
                                <div class="cropper-crop-box"
                                    style="width: 0px; height: 0px; transform: translate3d(0px, 0px, 0px); display: none;">
                                    <span class="cropper-view-box"><img src="" alt="cropper-img"
                                            style="width: 0px; height: 0px; transform: scale(1, 1) translate3d(0px, 0px, 0px) rotateZ(0deg);"></span><span
                                        class="cropper-face cropper-move"></span><span class="crop-info"
                                        style="top: 0px;">0
                                        × 0</span><span><span class="crop-line line-w"></span><span
                                            class="crop-line line-a"></span><span class="crop-line line-s"></span><span
                                            class="crop-line line-d"></span><span class="crop-point point1"></span><span
                                            class="crop-point point2"></span><span
                                            class="crop-point point3"></span><span
                                            class="crop-point point4"></span><span
                                            class="crop-point point5"></span><span
                                            class="crop-point point6"></span><span
                                            class="crop-point point7"></span><span
                                            class="crop-point point8"></span></span>
                                </div>
                            </div>
                        </div>
                        <div class="btns-box"><button type="button" class="btn btn-primary">确定</button><button
                                type="button" class="btn">取消</button></div>
                    </div>
                </div>
                <p class="new-guide-upload-avatar__desc">点击上传头像，从电脑相册中选择一张求职头像 或者从下方选择默认头像</p>
            </div>
            <ul class="new-guide-upload-avatar__default">
                <li class="new-guide-upload-avatar__item"><img
                        src="https://img.bosszhipin.com/boss/avatar/avatar_13.png" alt=""></li>
                <li class="new-guide-upload-avatar__item"><img
                        src="https://img.bosszhipin.com/boss/avatar/avatar_14.png" alt=""></li>
                <li class="new-guide-upload-avatar__item"><img
                        src="https://img.bosszhipin.com/boss/avatar/avatar_15.png" alt=""></li>
                <li class="new-guide-upload-avatar__item"><img
                        src="https://img.bosszhipin.com/boss/avatar/avatar_16.png" alt=""></li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { updateUserProfile } from "@/api/user/index"
let defaultPic = "https://img.bosszhipin.com/static/file/2022/6b3qfnceby1672284446085.png"
let profile = ref(defaultPic)
//这里直接传的就是图片资源链接给服务器
function changeFile({ target }: { target: any }) {
    let files = target?.files
    if (files && files.length > 0) {
        // 处理文件，例如访问第一个文件  
        const firstFile = files[0]; // firstFile 的类型是 File  
        // 你可以根据需要处理文件，例如上传到服务器等。
        updateUserProfile(firstFile).then(val => {
            //进行上传成功提示
            ElMessage({
                message: "图片上传成功！",
                type: 'success'
            })
            // 生成一个文件读取的对象
            const reader = new FileReader();
            reader.onload = function (ev) {
                // base64码
                var imgFile = ev.target.result;//或e.target都是一样的            
                profile.value = imgFile as string
            }
            //发起异步读取文件请求，读取结果为data:url的字符串形式，
            reader.readAsDataURL(firstFile);
        }).catch(err => {
            ElMessage({
                message: "图片上传失败",
                type: 'error'
            })
        })
    }

}

</script>

<style scoped>
@import url("@/assets/guideCommon.css");

.new-guide-upload-avatar__main {
    text-align: center;
}

.upload-input {
    position: absolute;
    z-index: 20;
    opacity: 0;
    cursor: pointer;
}

.new-guide-upload-avatar__upload-img {
    margin: 0 auto 20px;
    width: 160px;
    height: 160px;
    cursor: pointer;
}

.new-guide-upload-avatar__upload-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.new-guide-upload-avatar__upload-btn {
    position: relative;
    width: 96px;
    height: 32px;
    background: var(--themeColor);
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
}

.cropper-win {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, .5);
}

.custom-cropper-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 80%;
    z-index: 999;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
}

.vue-cropper {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    direction: ltr;
    touch-action: none;
    background-image: url();
}

.cropper-win .custom-cropper-box .vue-cropper {
    background-image: none;
}


/* 上传图片的描述 */
.new-guide-upload-avatar__desc {
    margin: 40px auto 34px;
    width: 336px;
}

/* 再下面的 */
.new-guide-upload-avatar__default {
    display: flex;
    justify-content: space-between;
}

.new-guide-upload-avatar__item {
    width: 102px;
    height: 102px;
    line-height: 102px;
    border: 2px solid #fff;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.new-guide-upload-avatar__item img {
    margin-top: 4px;
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
</style>